import React from 'react';

const FontSizeDemo: React.FC = () => {
  return (
    <div className="p-6 max-w-4xl mx-auto">
      <h1 className="text-3xl font-bold mb-8 text-center">Tailwind CSS 字体大小使用指南</h1>
      
      {/* 基础字体大小演示 */}
      <div className="mb-10">
        <h2 className="text-xl font-semibold mb-4 border-b pb-2">基础字体大小类</h2>
        <div className="space-y-4">
          <div className="flex items-center gap-4">
            <span className="text-sm bg-gray-100 p-2 rounded w-16 text-center">text-xs</span>
            <p className="text-xs">极小号字体 - 通常用于辅助性文字</p>
          </div>
          
          <div className="flex items-center gap-4">
            <span className="text-sm bg-gray-100 p-2 rounded w-16 text-center">text-sm</span>
            <p className="text-sm">小号字体 - 常用于辅助信息或说明文字</p>
          </div>
          
          <div className="flex items-center gap-4">
            <span className="text-sm bg-gray-100 p-2 rounded w-16 text-center">text-base</span>
            <p className="text-base">基础字体 - 默认字体大小，适合正文内容</p>
          </div>
          
          <div className="flex items-center gap-4">
            <span className="text-sm bg-gray-100 p-2 rounded w-16 text-center">text-lg</span>
            <p className="text-lg">大号字体 - 可用于小标题或强调内容</p>
          </div>
          
          <div className="flex items-center gap-4">
            <span className="text-sm bg-gray-100 p-2 rounded w-16 text-center">text-xl</span>
            <p className="text-xl">超大号字体 - 用于重要标题</p>
          </div>
          
          <div className="flex items-center gap-4">
            <span className="text-sm bg-gray-100 p-2 rounded w-16 text-center">text-2xl</span>
            <p className="text-2xl">2倍超大号字体 - 用于主要标题</p>
          </div>
        </div>
      </div>

      {/* 自定义字体大小演示 */}
      <div className="mb-10">
        <h2 className="text-xl font-semibold mb-4 border-b pb-2">自定义字体大小类（在tailwind.config.js中配置）</h2>
        <div className="space-y-4">
          <div className="flex items-center gap-4">
            <span className="text-sm bg-gray-100 p-2 rounded w-16 text-center">text-tiny</span>
            <p className="text-tiny">自定义极小号字体 (10px)</p>
          </div>
          
          <div className="flex items-center gap-4">
            <span className="text-sm bg-gray-100 p-2 rounded w-16 text-center">text-small</span>
            <p className="text-small">自定义小号字体 (12px)</p>
          </div>
          
          <div className="flex items-center gap-4">
            <span className="text-sm bg-gray-100 p-2 rounded w-16 text-center">text-regular</span>
            <p className="text-regular">自定义常规字体 (16px)</p>
          </div>
          
          <div className="flex items-center gap-4">
            <span className="text-sm bg-gray-100 p-2 rounded w-16 text-center">text-h1</span>
            <p className="text-h1">自定义H1标题 (40px)</p>
          </div>
          
          <div className="flex items-center gap-4">
            <span className="text-sm bg-gray-100 p-2 rounded w-16 text-center">text-h2</span>
            <p className="text-h2">自定义H2标题 (32px)</p>
          </div>
          
          <div className="flex items-center gap-4">
            <span className="text-sm bg-gray-100 p-2 rounded w-16 text-center">text-h3</span>
            <p className="text-h3">自定义H3标题 (28px)</p>
          </div>
          
          <div className="flex items-center gap-4">
            <span className="text-sm bg-gray-100 p-2 rounded w-16 text-center">text-h4</span>
            <p className="text-h4">自定义H4标题 (24px)</p>
          </div>
          
          <div className="flex items-center gap-4">
            <span className="text-sm bg-gray-100 p-2 rounded w-16 text-center">text-h5</span>
            <p className="text-h5">自定义H5标题 (20px)</p>
          </div>
          
          <div className="flex items-center gap-4">
            <span className="text-sm bg-gray-100 p-2 rounded w-16 text-center">text-large</span>
            <p className="text-large">自定义大号字体 (18px)</p>
          </div>
          
          <div className="flex items-center gap-4">
            <span className="text-sm bg-gray-100 p-2 rounded w-16 text-center">text-xlarge</span>
            <p className="text-xlarge">自定义超大号字体 (20px)</p>
          </div>
        </div>
      </div>
      
      {/* 移动端优化字体大小演示 */}
      <div className="mb-10">
        <h2 className="text-xl font-semibold mb-4 border-b pb-2">移动端优化字体大小</h2>
        <div className="space-y-4">
          <div className="flex items-center gap-4">
            <span className="text-sm bg-gray-100 p-2 rounded w-20 text-center">text-mobile-h1</span>
            <p className="text-mobile-h1">移动端H1标题 (32px)</p>
          </div>
          
          <div className="flex items-center gap-4">
            <span className="text-sm bg-gray-100 p-2 rounded w-20 text-center">text-mobile-h2</span>
            <p className="text-mobile-h2">移动端H2标题 (24px)</p>
          </div>
          
          <div className="flex items-center gap-4">
            <span className="text-sm bg-gray-100 p-2 rounded w-20 text-center">text-mobile-h3</span>
            <p className="text-mobile-h3">移动端H3标题 (20px)</p>
          </div>
        </div>
      </div>

      {/* 动态字体大小演示 */}
      <div className="mb-10">
        <h2 className="text-xl font-semibold mb-4 border-b pb-2">动态字体大小（JIT模式）</h2>
        <div className="space-y-4">
          <div className="flex items-center gap-4">
            <span className="text-sm bg-gray-100 p-2 rounded w-20 text-center">text-[18px]</span>
            <p className="text-[18px]">使用任意像素值设置字体大小</p>
          </div>
          
          <div className="flex items-center gap-4">
            <span className="text-sm bg-gray-100 p-2 rounded w-20 text-center">text-[2.5rem]</span>
            <p className="text-[2.5rem]">使用rem单位设置字体大小</p>
          </div>
        </div>
      </div>

      {/* 响应式字体大小演示 */}
      <div className="mb-10">
        <h2 className="text-xl font-semibold mb-4 border-b pb-2">响应式字体大小</h2>
        <div className="space-y-4">
          <div className="flex items-center gap-4">
            <span className="text-sm bg-gray-100 p-2 rounded w-40 text-center">text-base sm:text-lg md:text-xl</span>
            <p className="text-base sm:text-lg md:text-xl">根据屏幕尺寸自动调整字体大小</p>
          </div>
          
          <div className="flex items-center gap-4">
            <span className="text-sm bg-gray-100 p-2 rounded w-48 text-center">text-[16px] md:text-[24px] lg:text-[32px]</span>
            <p className="text-[16px] md:text-[24px] lg:text-[32px]">使用动态值实现响应式字体</p>
          </div>
        </div>
        <p className="mt-4 text-sm text-gray-500">提示：调整浏览器窗口大小可查看响应式效果</p>
      </div>

      {/* 字体粗细演示 */}
      <div className="mb-10">
        <h2 className="text-xl font-semibold mb-4 border-b pb-2">字体粗细与大小组合</h2>
        <div className="space-y-4">
          <div className="flex items-center gap-4">
            <span className="text-sm bg-gray-100 p-2 rounded w-32 text-center">text-lg font-medium</span>
            <p className="text-lg font-medium">中等粗细的大号字体</p>
          </div>
          
          <div className="flex items-center gap-4">
            <span className="text-sm bg-gray-100 p-2 rounded w-32 text-center">text-xl font-bold</span>
            <p className="text-xl font-bold">粗体的超大号字体</p>
          </div>
          
          <div className="flex items-center gap-4">
            <span className="text-sm bg-gray-100 p-2 rounded w-44 text-center">text-2xl font-extrabold</span>
            <p className="text-2xl font-extrabold">极粗的2倍超大号字体</p>
          </div>
        </div>
      </div>

      {/* 字体大小最佳实践 */}
      <div className="bg-blue-50 p-6 rounded-lg">
        <h2 className="text-xl font-semibold mb-4">字体大小使用最佳实践</h2>
        <ul className="list-disc pl-6 space-y-2 text-base">
          <li>优先使用Tailwind预设的字体大小类（text-sm, text-base, text-lg等）</li>
          <li>需要精确控制时使用JIT模式的动态值（如text-[24px]）</li>
          <li>为不同屏幕尺寸设置响应式字体大小（text-base md:text-lg）</li>
          <li>结合字体粗细创建视觉层次感</li>
          <li>考虑可读性，正文内容通常使用text-base到text-lg</li>
          <li>项目中已配置响应式根字体大小，会影响rem单位的实际大小</li>
        </ul>
      </div>
      
      {/* 链接到详细指南 */}
      <div className="text-center mt-12">
        <a 
          href="#/custom-font-size-guide" 
          className="inline-flex items-center gap-2 px-6 py-3 bg-primary text-white rounded-full hover:bg-primary/90 transition-colors"
        >
          查看详细使用指南
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
            <path d="m5 12 7 7 7-7" />
            <path d="M12 19V5" />
          </svg>
        </a>
      </div>
    </div>
  );
};

export default FontSizeDemo;